<style lang="less" scoped>
@import "../assets/css/config.less";
.page {
  background-color: #f5f7f9;
  overflow-x: hidden;
  overflow-y: auto;
}

.card_item {
  margin-top: 50px;
  div,
  p {
    text-align: left;
  }
}

.title {
  color: #3b3d45;
  margin-left: 30px;
  font-size: 25px;
  font-weight: 400;
}

.deadline {
  width: 250px;
  margin-left: 30px;
  margin-top: 20px;
  font-size: 12px;
}

.flex_display {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 20px;
}
.header{
  position: fixed;
  top:0;
  width: 100%;
  min-width: 1210px;
  z-index: 999;
}
.button-plain{
  line-height: 32px;
  height: 34px;
  background-color: @color6;
  border: 1px solid @color2;
  color: @color2;
  border-radius: 4px;
  font-size: 13px;
  width: 80px;
  outline: none;
  cursor: pointer;
  &:hover{
    background-color: @color2;
    color: @white;
  }
  &:active{
    background-color: @color3;
  }
  &:disabled{
    background-color: #F7F7F7;
    border-color: #DCDEE2;
    color: #DCDEE2;
  }
}
.font{
  color: @color2;
}
</style>
<style lang="less">
@import "../assets/css/config.less";
.el-button--primary{
  background-color: @color2!important;
  border-color: @color2!important;
}
.el-message-box__headerbtn .el-message-box__close{
  color: #909399!important;
  &:hover{
    color: @color2!important;
  }
}
</style>
<template>
  <div id="index">
    <div class="header">
      <myheader></myheader>
    </div>
    <div style="margin-top: 60px;"  :style="{padding: '0 24px 24px','background-color': 'white','min-width': '1210px'}" id="content" class="page">
      <div style="width:1000px;margin: 0 auto">
        <Card class="card_item">
          <div class="title">{{get_overview.name}}</div>
          <div class="deadline">
            截止日期:
            <span style="margin-left:5px;">{{get_overview.time}}</span>
          </div>
        </Card>
        <div class="flex_display" v-if="userGroup === '0'&&!get_overview.is_submit">
          <button class="button-plain" @click="update">提交</button>
          <span style="font-size: 14px;">
            <strong>状态：</strong><span class="font">未完成</span>
          </span>
        </div>
        <div class="flex_display" v-if="userGroup === '0'&&get_overview.is_submit">
          <button class="button-plain" @click="update">更新提交</button>
          <span style="font-size: 14px;">
            <strong>状态：</strong><span class="font">已完成</span>
          </span>
        </div>
        <div >
          <div ref="editor" style="text-align:left;margin-top:30px;margin-bottom: 30px;"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import header from "../components/header.vue";
import E from "wangeditor";
import { add_workRecord, getQuestionList } from "../api/api";
export default {
  name: "normalHomework",
  data: function() {
    return {
      bg: {
        width: `${window.innerWidth}px`,
        height: "auto",
        overflow: "scroll"
      },
      temp: [],
      userGroup: "",
      user: "",
      this_homeworkseq: "",
      editorContent: "",
      homework_answer: [],
      get_overview: []
    };
  },
  created() {
    if (JSON.parse(sessionStorage.getItem("homework_seq")) != null) {
      this.this_homeworkseq = JSON.parse(
        sessionStorage.getItem("homework_seq")
      ).seq;
      sessionStorage.removeItem("homework_seq");
    }
    if (JSON.parse(sessionStorage.getItem("homeworkSeq")) != null) {
      this.this_homeworkseq = JSON.parse(
        sessionStorage.getItem("homeworkSeq")
      ).seq;
      this.user = JSON.parse(sessionStorage.getItem("homeworkSeq")).UUID;
    }
  },
  mounted() {
    window.onresize = () => {
      return (() => {
        let content_top = document.getElementById("content").offsetTop;
        this.bg.height = `${window.innerHeight - content_top}px`;
        this.bg.width = `${window.innerWidth}px`;
      })();
    };
    let content_top = document.getElementById("content").offsetTop;
    this.bg.height = `${window.innerHeight - content_top}px`;
    this.userGroup = JSON.parse(this.$store.state.user).userGroup;
    if (this.user === ""||this.user === undefined) {
      this.user = JSON.parse(this.$store.state.user).UUID;
    }
    getQuestionList({
      seq: this.this_homeworkseq,
      UUID: this.user
    })
      .then(response => {
        if (response.state === true) {
          this.get_overview = response.result;
          if (this.get_overview.answer !== "") {
            this.editorContent = this.get_overview.answer;
          }
        } else {
          this.$Message.error(response.msg);
        }
      })
      .catch(error => {
        this.$Message.error(error.status);
      });
    setTimeout(() => {
      var editor = new E(this.$refs.editor);
      editor.customConfig.onchange = html => {
        this.editorContent = html;
      };
      var url = "";
      if (process.env.NODE_ENV === "development") {
        url = "http://localhost:8080/api/uploadImg";
      } else if (process.env.NODE_ENV === "production") {
        url = "https://www.ourspark.org/api/uploadImg";
      }
      editor.customConfig.uploadImgServer = url;
      editor.customConfig.zIndex = 0;
      editor.create();
      editor.txt.html(this.editorContent);
    }, 300);
  },
  components: {
    myheader: header
  },
  methods: {
    update() {
      if (this.editorContent !== "") {
        this.homework_answer.push({
          need: this.editorContent,
          answer: this.editorContent
        });
        add_workRecord({
          flag: JSON.parse(this.$store.state.user).flags,
          UUID: this.$store.state.UUID,
          seq: this.this_homeworkseq,
          question_answer: this.homework_answer
        })
          .then(response => {
            if (response.state === true) {
              this.$alert("作业提交成功！", "提示", {
                confirmButtonText: "确定",
                callback: action => {
                  this.homework_answer = [];
                  this.$router.push({
                    name: "homework"
                  });
                }
              });
            } else {
              this.$Message.error(response.msg);
            }
          })
          .catch(error => {
            this.$Message.error(error.status);
          });
      } else {
        this.$Message.error("作业内容不能为空");
      }
    }
  }
};
</script>
